<template>
    <GetanModal @register="register" @on-ok="handleSubmit">
        <n-form ref="formRef" :model="formValue" label-placement="left" :style="{ marginTop: '20px' }" :label-width="80" :rules="rules">
            <n-form-item label="工号" path="username">
                <n-input v-model:value="formValue.username" placeholder="系统唯一" :disabled="status === 'UPDATE'" />
            </n-form-item>
            <n-form-item label="员工名称" path="nickname">
                <n-input v-model:value="formValue.nickname" />
            </n-form-item>
            <n-form-item label="性别" path="gender">
                <n-radio-group v-model:value="formValue.gender" name="gender">
                    <n-space>
                        <n-radio :key="'1'" :value="'1'">男</n-radio>
                        <n-radio :key="'2'" :value="'2'">女</n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>
            <n-form-item label="手机号" path="mobile">
                <n-input v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="角色" path="roleIds">
                <n-select v-model:value="formValue.roleIds" multiple :options="roles" filterable :render-tag="renderSelector" />
            </n-form-item>
            <n-form-item label="备注" path="remark">
                <n-input v-model:value="formValue.remark" />
            </n-form-item>
        </n-form>
    </GetanModal>
</template>

<script setup lang="ts">
import { useGetanModal, GetanModal } from "@/components/Modal"
import { api } from "../../api"
import { FormInst, FormRules, NTag, SelectRenderTag } from "naive-ui"

const formRef = ref<FormInst | null>(null)

const formValue = ref<Recordable>({})

const status = ref<string>("")

const rules: FormRules = {
    username: [{ required: true, message: "请输入工号" }],
    nickname: [{ required: true, message: "请输入员工姓名" }]
}

const { register, methods } = useGetanModal({ title: "新增员工" })

const openAddForm = (defaultData?: Recordable) => {
    formValue.value = defaultData ? { ...defaultData } : {}
    formValue.value.roleIds = []
    status.value = "ADD"
    methods.open("新增员工")
}

const openUpdateForm = async (rowData: Recordable) => {
    formValue.value = { ...rowData }
    const { res, isOk } = await api.roleIds({ id: rowData.id })
    if (isOk()) {
        formValue.value.roleIds = res.value ?? []
        status.value = "UPDATE"
        methods.open("修改员工")
    }
}

const emits = defineEmits(["after-add", "after-update", "after"])

defineExpose({ openAddForm, openUpdateForm })

const handleSubmit = () => {
    formRef.value?.validate(async errors => {
        if (!errors) {
            if (status.value === "ADD") {
                const { isOk } = await api.add(formValue.value)
                if (isOk()) {
                    emits("after-add", status.value)
                    emits("after", status.value)
                    methods.close()
                }
            } else {
                const { isOk } = await api.update(formValue.value)
                if (isOk()) {
                    emits("after-update", status.value)
                    emits("after", status.value)
                    methods.close()
                }
            }
        } else {
            console.log(errors)
        }
    })
}

const roles = shallowRef<Recordable[]>([])

const loadRoles = async () => {
    const { res, isOk } = await api.roleSelector()
    if (isOk()) {
        roles.value = res.value.map((v: Recordable) => {
            return {
                label: v.name,
                value: v.id
            }
        })
    }
}

const renderSelector: SelectRenderTag = ({ option, handleClose }) => {
    return h(
        NTag,
        {
            round: true,
            closable: true,
            onClose: (e: any) => {
                e.stopPropagation()
                handleClose()
            }
        },
        { default: () => option.label as string }
    )
}

loadRoles()
</script>
